<template>
      <!-- 修改用户信息  -->
     <div>
     <el-dialog v-model="dialogFormVisible" title="修改">
    <el-form :model="form">
      <el-form-item label="用户名称:" :label-width="formLabelWidth">
        <el-input v-model="name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="账号:" :label-width="formLabelWidth">
        <el-input v-model="username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="  密码:" :label-width="formLabelWidth">
        <el-input v-model="userpsd" autocomplete="off"  />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click=" update_user"
          >确定修改</el-button
        >
      </span>
    </template>
  </el-dialog>
    </div>
   
  <div>
  <el-table :data=" tableData.filter(data => !search || data.tel.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
    <el-table-column label="用户名" prop="nickName" />
    <el-table-column label="账号" prop="tel" />
     <el-table-column label="密码" prop="pwd" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="输入账号..."  />
      </template>
      <template #default="scope">
        <el-button size="small" @click="onchange(scope)"
          >修改</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="delete_user(scope.row.tel,scope.$index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
import axios from 'axios'
  export default {
    data() {
      return {
         formLabelWidth : '140px',
           add: false,
           editDialogVisible: true,
            dialogTableVisible :true,
           dialogFormVisible : false,
           uid:"",
           name:"",
           username:"",
           userpsd:"",       
           tableData: [
            ],
       
        search: ''
      }
    }, 
    mounted() {
           axios.get("/api/user/getuser",{
            }).then(res=>{
                // console.log(res)
             this.tableData = res.data
             console.log(this.tableData)
            
            })
       },
    methods: {
      //新增一个用户，并关闭弹窗
      // add_user(){
      //     axios.get("api/add_user",{
      //           params:{
      //                name : this.name,
      //               username : this.username,
      //               userpsd : this.userpsd
      //           }
      //         }).then(res=>{
      //           // console.log(res)
      //         })
      //        this.add = false
      // },
             update_user(){ 
              //  console.log(this.uid);               
              axios.get("api/update_user",{
                params:{
                      uid: this.uid,
                     name : this.name,
                    username : this.username,
                    userpsd : this.userpsd
                }
              }).then(res=>{
                // console.log(res)
              })
             this.dialogFormVisible = false
           
        },
        //打开修改的弹窗，拿到要修改用户的id
       onchange(scope){
        console.log(scope.row.id);
          
          //  console.log( uid);
           this.uid = scope.row.id
           this.name = scope.row.nickName
           this.username = scope.row.tel
           this.userpsd = scope.row.pwd
          
            this.dialogFormVisible = true
        },
        delete_user(tel,index){
             axios.get("/api/delete_user1",{
              params:{
                tel
              }
             }).then(res=>{
              this.tableData.splice(index,1)
             })
        }
    },
  }
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>